<template>
  <div style="position: relative"><!-- element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog，即点击空白处弹框可关闭。 -->
    <!-- :visible.sync 子组键改变父组件的值 控制子组件的显示-->
    <el-dialog title="标题名" :visible.sync="selectCourseDialogIsShow" :before-close="handleClose" :close-on-click-modal="false">
      <template>
        <div>
          <el-select v-model="currentCno" placeholder="请选择" style="width: 600px;" @change="addSelectCourse()">
            <el-option
              v-for="(course,index) in this.courses"
              :key="course.cno"
              :label="course.cname"
              :value="course.cno">
              <span style="display:inline-block;color: #8492a6; font-size: 10px;">{{ course.cno }}</span>
              <span style="width: 80px;display: inline-block; color: #8492a6; font-size: 13px;padding-left: 10px;">{{ course.cname }}</span>
              <span style="width: 40px;display: inline-block; color: #8492a6; font-size: 10px;padding-left: 10px;">{{ course.grade }}</span>
              <span style="width: 240px;display: inline-block; color: #8492a6; font-size: 13px;padding-left: 10px;">{{ course.cdesc }}</span>

              <span style="width:60px;border-radius: 4px;background-color:firebrick;color: azure;font-size: 10px;text-align: center" >
             选课
          </span>


            </el-option>
          </el-select>
        </div>



      </template>

      <div style="width: 756px;">
        <div v-for="(sc,index) in this.student.scs">
          <span style="width:60px">{{sc.course.cno}}</span><span style="width:120px">{{sc.course.cname}}</span>
          <span style="width:20px">{{sc.course.grade}}</span><span style="width:200px">{{sc.course.cdesc}}</span>
          <span style="width:20px">{{sc.score}}</span><span style="width:200px">{{processDate(sc.addtime)}}</span>


        </div>
      </div>
      <div>
        <el-button size="mini" @click="commitSelectCourse">
          确认选课
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import utilsFD from "../../../../static/js/utils/index.js"
  import api from "../../../../axios/api"
  export default {
    name: "selectCourse",

    data(){
      return {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        selectCourseDialogIsShow: false,
        courses : [],
        student : {},
        currentCno:""
      }
    },
    methods:{
      //页面初始化时加载的事件
      init(courses,student) {
        console.log(courses);
        this.selectCourseDialogIsShow = true;
        this.courses = courses;
        this.student = student;
      },
      //关闭页面
      handleClose() {
        this.selectCourseDialogIsShow = false;
        //给父组件传参
        this.$emit("selectCourseDialogIsShow", this.selectCourseDialogIsShow);
      },
      processDate(date){
        return utilsFD.FD.Fd().initCNTime(new Date(date));
      },

      addSelectCourse(){
        console.log(this.currentCno);
        var isUnSelectedCourse = false;
        for(var index=0;index < this.student.scs.length;index++){
          //console.log(this.student.scs[index]);
          let cno = this.student.scs[index].cno;
          if(this.currentCno==cno){
            isUnSelectedCourse = true;
            this.$message.error("该课程已选择");
            break;
          }
        }
        if(!isUnSelectedCourse){
          function getCourseByCno(cno,that){
            for(var i=0;i< that.courses.length;i++){
              if(that.courses[i].cno==cno){
                return that.courses[i];
              }
            }
          }
          var course = getCourseByCno(this.currentCno,this);


          var newCourse = {"scno": 11,
            "sno": this.student.sno,
            "cno": this.currentCno,
            "tno": "0001",
            "score": null,
            "examtime": null,
            "exampoint": null,
            "addtime": new Date(),
            "scstate": 1,
            "adno": null,
            "course": {
              "cno": this.currentCno,
              "cname":course.cname ,
              "grade": course.grade,
              "cdesc": course.cdesc
            },
            "teacher": {
              "tno": "0001",
              "tname": "赵世晨1",
              "sex": "女",
              "birthday": 223689600000,
              "jointime": 1146441600000,
              "area": "四川省",
              "imgsrc": "",
              "pwd": "",
              "tdesc": "硕士研究生学历",
              "scs": null,
              "clazz": null
            }

          };
          console.log(newCourse);
          this.student.scs.push(newCourse);
          console.log(this.student);
        }
      },
      commitSelectCourse(){
        api.setDataFromAxios("/api/studentController/saveSelectCourseCookie", this.student, "post",this.headers)
          .then(dto => {
            console.log(dto)
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      }
    }
  }
</script>

<style scoped lang="stylus">
  span
    display inline-block
    height 20px
    line-height 20px
</style>
